<template>
    <div>
        <!-- 用户搜索 -->
        <div class="header">
            <div class="form">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">  
                  <el-input v-model="name" placeholder="请输入名字" suffix-icon="el-icon-search" style="width: 200px;"
                      @keyup.enter.native="loadPost"></el-input>
                  <el-select v-model="sex" filterable placeholder="请选择性别" style="margin-left: 5px;">
                      <el-option label="男" value="1"></el-option>
                      <el-option label="女" value="0"></el-option>
                  </el-select>
                  <el-button type="primary" style="margin-left: 5px;" @click="loadPost">查询</el-button>
                  <el-button type="success" @click="resetParam">重置</el-button>
                </el-form>
            </div>
            <div class="group">
                <el-button size="small" type="warning" icon="el-icon-plus" @click="add" >添加用户</el-button>
                <el-button size="small" type="danger" icon="el-icon-delete" >批量删除</el-button>
            </div>
        </div>

        <!-- 用户列表 -->
        <div class="listContent">
            <el-table :data="tableData" stripe border style="width: 100%" header-cell-class-name="active-header" cell-class-name="table-center">
              <el-table-column  type="selection"  width="55"></el-table-column>
              <el-table-column  prop="id" label="ID" width="180"></el-table-column>
              <el-table-column  prop="no" label="账号" width="180"></el-table-column>
              <el-table-column  prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column  prop="age" label="年龄" width="80"></el-table-column>
              <el-table-column  prop="sex" label="性别" width="80">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.sex === 1 ? 'primary' : 'success'"
                            disable-transitions>{{scope.row.sex === 1 ? '男' : '女'}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column  prop="roleId" label="角色" width="120">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'primary' : 'success')"
                            disable-transitions>{{scope.row.roleId === 0 ? '超级管理员' :
                        (scope.row.roleId === 1 ? '管理员' : '用户')}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column  prop="phone" label="电话" width="180"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
                    <el-button size="mini"  type="danger"  @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页代码 -->
            <Pagination :total="total" :pageSize="pageSize" @CurrentChange="CurrentChange"></Pagination>

            <!-- 添加用户窗口 -->
            <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="账号" prop="no">
                    <el-col :span="20">
                        <el-input v-model="form.no"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="名字" prop="name">
                    <el-col :span="20">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-col :span="20">
                        <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-col :span="20">
                        <el-input v-model="form.age"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-col :span="20">
                        <el-input v-model="form.phone"></el-input>
                    </el-col>
                </el-form-item>
              </el-form>
              
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
              </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import Pagination from "@/components/pagination/Pagination.vue";
import { color } from "echarts";

export default {
    components:{
      Pagination
    },
    data() {
      return {
        tableData: [],
        pageSize:10,
        pageNum:1,
        total:0,
        name:'',
        sex:'',
        sexs:[
            {
                value: '1',
                label: '男'
            }, {
                value: '0',
                label: '女'
            }
        ],
        dialogFormVisible: false,  //添加用户窗口
        form: {
            id:'',
            no:'',
            name:'',
            password:'',
            age:'',
            phone:'',
            sex:'0',
            roleId:'2'
        },
        formLabelWidth: '120px',
        formInline: {
          user: '',
          date: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleEdit(index, row) {
        console.log("修改数据");
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log("删除数据");
        console.log(index, row);
      },
      //获取分页页码------------------------------
      CurrentChange(page) {
        this.orderList(page)
      },
      toProductPage(){
        console.log("跳转到添加商品页面");
        this.$router.push('/product/product-page');
      },
      loadUserList(){
        this.$axios.get('http://localhost:8090/wms/user/list',{}).then(res=>{
             console.log(res)
        })
      },
      //清空查询表单方法
      resetParam(){
                this.name=''
                this.sex=''
      },
      add(){
        this.dialogFormVisible = true
        this.$nextTick(()=>{
            this.resetForm()
        })
      },
    },
    beforeMount() {
        this.loadUserList()
    }
}
</script>

<style lang="less" scoped>
.header{
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
    .group{
        border: 1px solid #eee;
        padding: 8px;
    }
}
.listContent{
    background: pink;
    height: 100px;
    /deep/.active-header{//   /deep/穿透
        color: #333;
        text-align: center;
    }
}
.el-form-item{
    margin-bottom: 10px;
}
.el-input__inner{
    height:35px;
}
</style>